<template>
    <div class="dashboard-container">
      <el-row>
        <el-col :span="12">
          <el-card style="height: 300px">
            <div slot="header">
              <el-avatar :size="80" :src="newUser.avatar"></el-avatar>
              <el-button
                @click="diplay"
                class="el-button"
                style="float: right; padding: 3px 0"
                type="text"
                >编辑</el-button
              >
            </div>
            <div>
              <span>姓名：{{ user.name }}</span>
              <span style="float: right; margin-right: 150px"
                >成员类型：{{ user.type }}</span
              >
              <el-row style="margin-top: 30px">
                <span>昵称：{{ newUser.nickName }}</span>
                <span style="float: right; margin-right: 150px"
                  >班级：{{ user.headClass }}</span
                >
              </el-row>
              <el-row style="margin-top: 30px">
                <span>学习方向：{{ user.tagName }}</span>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <div>
            <div>
              <el-card style="margin-left: 30px; height: 300px">
                <div slot="header">
                  <el-button
                    @click="goArticleList"
                    class="el-button"
                    style="float: right; padding: 20px 120px"
                    type="text"
                    >查看</el-button
                  >
                </div>
                <ul>
                  <li>发布文章：{{ introduction.articleCount }} 篇</li>
                  <li style="margin-top: 30px">QQ：{{ newUser.qq }}</li>
                  <li style="margin-top: 30px">微信：{{ newUser.wx }}</li>
                  <li style="margin-top: 30px">
                    手机号：{{ newUser.phonenumber }}
                  </li>
                </ul>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="text-align: center" class="title">
        <span>工作室成员分布图(年份/人)</span>
      </div>
      <el-row>
        <el-col :span="12">
          <div ref="chart" id="chart" style="width: 100%; height: 300px"></div>
        </el-col>
        <el-col :span="12">
          <div ref="charts" id="charts" style="width: 100%; height: 300px"></div>
        </el-col>
      </el-row>
      <div>
        <el-dialog
          :visible.sync="isColle"
          width="60%"
          :close-on-click-modal="false"
          :show-close="true"
          center
        >
          <div>
            <div style="text-align: center; margin-bottom: 30px">
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                name="img"
                :headers="{ token: token }"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="user.avatar" :src="user.avatar" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
          <el-form ref="form" :model="user" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="昵称" prop="nickName">
                  <el-input
                    v-model="user.nickName"
                    placeholder="请输入用户昵称"
                    maxlength="30"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="user.email" placeholder="请输入邮箱" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="手机号" prop="phonenumber">
                  <el-input v-model="user.phonenumber" placeholder="请输入邮箱" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="微信" prop="wx">
                  <el-input v-model="user.wx" placeholder="请输入微信" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="QQ" prop="qq">
                  <el-input v-model="user.qq" placeholder="请输入QQ号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align: right">
              <el-button type="primary" style="width: 100px" @click="update"
                >保存</el-button
              >
              <el-button type="danger" @click="confirms" style="width: 100px"
                >取消</el-button
              >
            </el-row>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import store from "@/store";
  import { updateUser, getIntroduction } from "@/api/system/user";
  import { Notification } from "element-ui";
  import { getToken } from "@/utils/auth";
  import { sendWSPush } from "@/utils/socker/websocker"
  
  
  
  export default {
    name: "Dashboard",
    computed: {
      ...mapGetters(["name"]),
    },
    created() {},
    computed: {
      //有子菜单
    },
    methods: {
      goArticleList(){
        this.$router.push('article')
      },
      init() {
        let id = store.state.user.id.toString();
        let isId = 0;
        let chartData = store.state.user.chartsData;
        if (id.length > 4) {
          isId = id.slice(0, 4);
        }
        for (let i = 0; i < store.state.user.chartsData.length; i++) {
          this.y.push(store.state.user.chartsData[i].value);
          this.x.push(store.state.user.chartsData[i].name);
        }
        for (let i = 0; i < this.x.length; i++) {
          if (this.x[i] == isId.toString()) {
            this.y[i] = {
              value: this.y[i],
              itemStyle: {
                color: "#a90000",
              },
            };
            chartData[i] = {
              name: chartData[i].name,
              value: chartData[i].value,
              itemStyle: {
                color: "#a90000",
              },
            };
          }
        }
        //反转数组
        chartData.reverse();
        this.y.reverse();
        this.x.reverse();
        const pie = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "40",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: chartData,
            },
          ],
        };
        const bar = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.x,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "Direct",
              type: "bar",
              barWidth: "10%",
              data: this.y,
            },
          ],
        };
        // 若是echarts只想在当前页面引用，可以直接引入，然后修改即可！
        // var myChart = echarts.init(document.getElementById("chart"));
        // 以下全局，我引入echarts属性（若是多个页面需要引入echarts的话，一定要在main.js中引入
        // var myChart = this.$echarts.init(this.$refs.chart);
        // 指定图表的配置项和数据
        var myChart = this.$echarts.init(this.$refs.chart);
        myChart.setOption(pie);
        var myCharts = this.$echarts.init(this.$refs.charts);
        myCharts.setOption(bar);
      },
      confirms() {
        this.isColle = false;
        store.dispatch("GetInfo");
      },
      update() {
        const submitUser = {
          id: this.user.id,
          nickName: this.user.nickName,
          qq: this.user.qq,
          wx: this.user.wx,
          email: this.user.email,
          avatar: this.user.avatar,
          phonenumber: this.user.phonenumber,
        };
        updateUser(submitUser).then((response) => {
          if (response.code == 200) {
            store.dispatch("GetInfo").then((response) => {
              this.newUser.avatar = response.user.avatar;
              this.newUser.nickName = response.user.nickName;
              this.newUser.wx = response.user.wx;
              this.newUser.qq = response.user.qq;
              this.newUser.phonenumber = response.user.phonenumber;
            });
            Notification.success({
              title: "保存信息成功",
            });
            this.isColle = false;
          } else {
            this.$message.error(response.msg);
          }
        });
      },
      diplay() {
        this.isColle = true;
      },
      initIntroduction() {
        getIntroduction().then((response) => {
          this.introduction = response;
        });
      },
      handleAvatarSuccess(res, file) {
        if (res.code == 200) {
          this.user.avatar = res.data;
          console.log(this.user);
        } else {
          this.$message.error("上传图片失败");
        }
      },
      beforeAvatarUpload(file) {
        //判断头像大小
        const isJPG =
          file.type == "image/png" ||
          file.type == "image/jpg" ||
          file.type == "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 1;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG/JPEG/PNG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 1MB!");
        }
        return isJPG && isLt2M;
      },
    },
    data() {
      return {
        x: [],
        y: [],
        token: getToken(),
        user: store.state.user,
        isColle: false,
        newUser: {
          id: store.state.user.id,
          avatar: store.state.user.avatar,
          nickName: store.state.user.nickName,
          phonenumber: store.state.user.phonenumber,
          qq: store.state.user.qq,
          wx: store.state.user.wx,
        },
        fileList: [],
        uploadUrl: "http://10.2.37.178:8181/upload",
        categoryList: [],
        introduction: {},
      };
    },
    created() {
      setTimeout(() => {
        // console.log(store.state.user.chartsData);
        this.init();
      }, 500);
      // sendWSPush({type:2,uid:store.state.user.id,msg:'你好啊',to:'20212169'})
      this.initIntroduction();
    },
    mounted() {
    },
  };
  </script>
  
  <style lang="scss" scoped>
  li {
    font-size: 18px;
  }
  
  /* 更改class为“highlight”的列表项的背景颜色和文字颜色 */
  .highlight {
    background-color: yellow;
    color: blue;
  }
  .title {
    margin-top: 30px;
    color: chocolate;
    font-weight: bolder;
    font-size: 25px;
    font-style: oblique;
  }
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .el-button {
    margin: 35px auto;
    margin-right: 50px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 180px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>